<template>
  <div class="page">
    <div class="notice">
      <van-notice-bar left-icon="volume-o" text="请认真填写居民信息采集表( * 为必填项)" />
    </div>

    <div class="form">
      <van-form ref="formRef" label-width="100px">
        <FormGroup v-model="formData" :json="formJson">
          <template #sfzdry-input>
            <van-radio-group v-model="formData.sfzdry" direction="horizontal">
              <van-radio :name="item.value" v-for="(item, index) in whether.options" :key="index">
                {{ item.label }}
              </van-radio>
            </van-radio-group>
            <span
              style="flex: 1 1 0%; text-align: right; color: red; font-size: 13px"
              @click="showThirtyOne = true"
            >
              哪些是重点人群?
            </span>
          </template>
        </FormGroup>
        <div class="footer">
          <van-button block type="primary" @click="onSubmit"> 提交 </van-button>
        </div>
      </van-form>
    </div>

    <!-- 乡镇地址选择 -->
    <Cascader v-model:show="showAddress" v-model:desc="formData._address" :options="district" />
    <!-- 31类人群 -->
    <Cascader
      v-model:show="showZdrqType"
      v-model:desc="formData._zdrytype"
      :options="zdrq"
      @change="handleChange"
    />

    <div class="success" v-if="showSuccess">
      <div class="icon"><img src="@/assets/icon-success.png" alt="" /></div>
      <div class="text">提交成功</div>
      <div class="info">
        <div class="info-item">
          <div class="info-label">姓名</div>
          <div class="info-value">{{ formatName(formData.username) }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">身份证号</div>
          <div class="info-value">{{ idCard(formData.cardno) }}</div>
        </div>
      </div>
    </div>

    <ThirtyOne v-model:show="showThirtyOne" />
  </div>
</template>
<script setup>
import { Notify, Toast } from 'vant'

import http from '@/utils/http'
import formRule from '@/utils/form-rule'

import FormGroup from '@/components/FormGroup.vue'
import Cascader from '@/components/Cascader.vue'
import ThirtyOne from './components/ThirtyOne.vue'

import district from '@/data/district.json'
import zdrq from '@/data/31.json'
import nation from '@/data/nation'

const showThirtyOne = ref(false)
const showSuccess = ref(false)
const showAddress = ref(false)
const showZdrqType = ref(false)
const formRef = ref()
const formData = reactive({
  // id: '796731366023630848',
  // sex: '2',
  // nation: '汉族',
  // username: '王老板',
  // cardType: 2,
  // cardno: '141182199203240102',
  // area: '扶沟县',
  // areajd: '桐丘街道',
  // areajwh: '西关社区居民委员会',
  // ldh: '1',
  // dyh: '1',
  // xxaddress: '1',
  // sfzh: '否',
  // wgname: '1',
  // wwgname: '1',
  // wwgyname: '1',
  // sfwhz: '否',
  // sfgarq: '否',
  // sfczrq: '否',
  // sfzdry: '否',
  // fzcardno: '141182199203240102',
  // outtype: '在外务工',
})

const baseInfo = computed(() => {
  const required = true

  const json = [
    { name: 'username', label: '姓名', required, rules: formRule.zh },
    {
      name: 'sex',
      label: '性别',
      required,
      type: 'radio',
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
      ],
    },
    { name: 'nation', label: '民族', required, type: 'select', options: nation },
    {
      name: 'cardType',
      label: '证件类型',
      required,
      type: 'radio',
      options: [
        { label: '身份证', value: 1 },
        { label: '其他', value: 2 },
      ],
    },
  ]

  if (formData.cardType == 1) {
    json.push({ name: 'cardno', label: '身份证号', required, rules: formRule.cardNoRules })
  } else if (formData.cardType == 2) {
    json.push({ name: 'cardno', label: '证件号码', required })
  }

  return json
})

const whether = {
  type: 'radio',
  options: [
    { label: '是', value: '是' },
    { label: '否', value: '否' },
  ],
}

const formJson = computed(() => {
  const required = true

  return [
    ...baseInfo.value,
    { name: 'tel', label: '手机号', required, rules: formRule.telRules },
    { name: 'sfbrsjh', label: '是否本人手机号', required, ...whether },
    { name: 'hjno', label: '户籍号', required, rules: formRule.number },
    {
      name: 'yhzgx',
      label: '与户主关系',
      required,
      type: 'select',
      options: [
        { label: '户主', value: '户主' },
        { label: '配偶', value: '配偶' },
        { label: '之子', value: '之子' },
        { label: '之女', value: '之女' },
        { label: '之孙子', value: '之孙子' },
        { label: '之孙女', value: '之孙女' },
        { label: '之外甥', value: '之外甥' },
        { label: '之外甥女', value: '之外甥女' },
        { label: '之外孙子', value: '之外孙子' },
        { label: '之外孙女', value: '之外孙女' },
        { label: '之儿媳', value: '之儿媳' },
        { label: '之女婿', value: '之女婿' },
        { label: '之父', value: '之父' },
        { label: '之母', value: '之母' },
        { label: '之公公', value: '之公公' },
        { label: '之婆婆', value: '之婆婆' },
        { label: '之岳父', value: '之岳父' },
        { label: '之岳母', value: '之岳母' },
        { label: '之祖父', value: '之祖父' },
        { label: '之祖母', value: '之祖母' },
        { label: '之外祖父', value: '之外祖父' },
        { label: '之外祖母', value: '之外祖母' },
        { label: '之曾孙', value: '之曾孙' },
        { label: '之曾孙女', value: '之曾孙女' },
        { label: '之兄弟', value: '之兄弟' },
        { label: '之兄妹', value: '之兄妹' },
        { label: '之姐弟', value: '之姐弟' },
        { label: '之姐妹', value: '之姐妹' },
        { label: '之侄子', value: '之侄子' },
        { label: '之侄女', value: '之侄女' },
        { label: '其他', value: '其他' },
      ],
    },
    {
      name: '_address',
      label: '现居住地',
      required,
      isLink: true,
      readonly: true,
      on: {
        click() {
          showAddress.value = true
        },
      },
    },
    { name: 'xqmc', label: '小区名称' },
    { name: 'ldh', label: '楼栋号' },
    { name: 'dyh', label: '单元号' },
    { name: 'xxaddress', label: '现居住详细住址', placeholder: 'XXX小区XX号X单元' },

    { name: 'sfzdry', label: '是否为31类重点人员', required, ...whether },

    ...(() => {
      const json = []

      if (formData.sfzdry == '是') {
        json.push({
          name: '_zdrytype',
          label: '重点人员类型选择',
          required,
          isLink: true,
          readonly: true,
          on: {
            click() {
              showZdrqType.value = true
            },
          },
        })
      }

      return json
    })(),

    { name: 'sfczrq', label: '是否为常住', required, ...whether },
    ...(formData.sfczrq != undefined && formData.sfczrq == '否'
      ? [
          {
            name: 'outtype',
            label: '外出类型',
            type: 'select',
            required,
            options: [
              { label: '在外务工', value: '在外务工' },
              { label: '在外经商', value: '在外经商' },
              { label: '在外上学', value: '在外上学' },
            ],
          },
        ]
      : []),

    // 在外务工
    ...(formData.sfczrq == '否' && formData['外出类型'] == '在外务工'
      ? [
          { name: 'gzaddress', label: '工作地址', required, type: 'area' },
          { name: 'dwname', label: '工作单位', required },
        ]
      : []),

    // 在外经商
    ...(formData.sfczrq == '否' && formData['外出类型'] == '在外经商'
      ? [{ name: 'jsaddress', label: '经商地址', required, type: 'area' }]
      : []),

    // 在外上学
    ...(formData.sfczrq == '否' && formData['外出类型'] == '在外上学'
      ? [
          {
            name: 'xxtype',
            label: '学校类型',
            required,
            options: [
              { label: '大学', value: '大学' },
              { label: '中学', value: '中学' },
              { label: '小学', value: '小学' },
            ],
          },
          { name: 'schooladdress', label: '学校地址', required }, // 待完善省市区
        ]
      : []),

    { label: '是否为独居老人', name: 'djlr', required, ...whether },
    { label: '是否为精神智障', name: 'jszz', required, ...whether },
    { label: '是否为长期卧床', name: 'cqwc', required, ...whether },
    { label: '是否为残疾人', name: 'cjr', required, ...whether },
    { label: '是否为孕妇', name: 'yf', required, ...whether },
    { label: '是否为基础疾病患者', name: 'jcbhz', required, ...whether },
    { label: '是否为血液透析患者', name: 'xytxhz', required, ...whether },

    // { name: 'sfgarq', label: '是否关爱人群', required, ...whether },
    // ...(formData.sfgarq != undefined && formData.sfgarq == '是'
    //   ? [
    //       {
    //         name: 'garqzl',
    //         label: '关爱人群种类',
    //         type: 'select',
    //         required,
    //         options: [
    //           { label: '血液透析患者', value: 'xytxhz' },
    //           { label: '基础病患者', value: 'jcbhz' },
    //           { label: '独居老人', value: 'djlr' },
    //           { label: '精神智障', value: 'jszz' },
    //           { label: '长期卧床', value: 'cqwc' },
    //           { label: '残疾人', value: 'cjr' },
    //           { label: '孕妇', value: 'yf' },
    //           { label: '都不是', value: '0' },
    //         ],
    //       },
    //     ]
    //   : []),

    { name: 'sfzh', label: '是否为租户', required, ...whether },
    ...(formData.sfzh != undefined && formData.sfzh == '是'
      ? [
          { name: 'fzname', label: '房主姓名', required },
          { name: 'fzcardno', label: '房主证件号', required, rules: formRule.cardNoRules },
          { name: 'fztel', label: '房主手机号', required, rules: formRule.telRules },
        ]
      : []),

    { name: 'wwgyname', label: '微网格员姓名', required },
    // { name: 'wwgytel', label: '微网格员手机号', required, rules: formRule.telRules },
    // { name: 'wwgycardno', label: '微网格员身份证', required, rules: formRef.cardNoRules },
    { name: 'wgname', label: '网格名称', required },
    { name: 'wwgname', label: '微网格名称' },
  ]
})

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      const body = {
        ...formData,
        area: '扶沟县',
      }

      if (body.sfgarq == '是' && body.garqzl) {
        const key = body.garqzl // 关爱人群对应所选
        body[key] = '是'
      }

      const addressParse = formData._address.split('/')

      body.areajd = addressParse[1] // 街道/乡镇
      body.areajwh = addressParse[2] // 现住居委会/村委会
      body.xqmc = addressParse[3] // 小区/自然村

      http({
        method: 'post',
        url: '/person_info/collect',
        loading: '提交中...',
        data: body,
      }).then(res => {
        showSuccess.value = true
        // Toast({
        //   type: 'success',
        //   duration: 0,
        //   message: '提交成功',
        //   overlay: true,
        // })
      })
    })
    .catch(e => {
      Notify({
        type: 'warning',
        message: '信息未填完整',
      })
    })
}

const handleChange = selectedOptions => {
  formData.zdryType = selectedOptions.pop().value
}

const formatName = name => {
  if (!name) name = ''

  var newStr
  if (name.length === 2) {
    newStr = name.substr(0, 1) + '*'
  } else if (name.length > 2) {
    var char = ''
    for (let i = 0, len = name.length - 2; i < len; i++) {
      char += '*'
    }
    newStr = name.substr(0, 1) + char + name.substr(-1, 1)
  } else {
    newStr = name
  }
  return newStr
}

const idCard = data => {
  if (!data) data = ''
  return data.replace(/(.{6}).*(.{4})/, '$1********$2')
}
</script>
<style lang="scss" scoped>
.page {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 60px;
}
.notice {
  // margin-bottom: var(--pa);
}

.form {
  // margin-top: var(--pa);
  // padding: var(--pa);
  // border-radius: 4px;
  // overflow: hidden;
}
.footer {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 10px;
}

.success {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 70px;

  .icon {
    text-align: center;
    img {
      width: 130px;
    }
  }

  .text {
    font-size: 18px;
    color: #000;
    text-align: center;
  }

  .info {
    background-color: #fafafa;
    border-radius: 4px;
    margin: 0 auto;
    width: 80%;
    margin-top: 30px;
    padding: 12px;
    .info-item {
      display: flex;
      line-height: 30px;
      .info-label {
        flex: 1;
        color: #999;
      }
    }
  }
}
</style>
